@font-face {
    font-family: 'es';
    src: url('../fonts/eurostile-webfont.woff2') format('woff2'),
    url('../fonts/eurostile-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
.animated{
    animation-duration: .3s;
}
.number {
    font: .2rem/1 'es';
}
html{
     //background: #931626;
}
html, body{
    width: 100%;
    height: 100%
}

body {
    font-weight: 500;
    font-family: Microsoft YaHei, Arial, "黑体", "宋体", sans-serif;
    background: #002ea0;
}

ul {
    list-style: none
}

li {
    display: block
}

a, a:hover, a:active, a:visited, a:link {
    color: inherit;
    text-decoration: none
}

input, textarea, button, select {
    outline: none;
    color: inherit
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

::-webkit-scrollbar {
    width: 0;
    height: 0
}


#page {
    @yellow:#fcc800;
    @blue: #00ffe7;
    overflow: hidden;
    font-size: .19rem;
    line-height: 1;
    position: relative;
    color: #fff;
    font-weight: 500;
    background: url(../image/bg.jpg)no-repeat center/cover;
    header{
        background: url(../image/head_left.png)no-repeat left center/auto 100%, url(../image/head_right.png)no-repeat right center/auto 100%,url(../image/scan_line.png)no-repeat bottom center/6rem auto;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 1.6rem;
        text-align: center;
        letter-spacing: .08rem;
        z-index: 2;
        h1{
            line-height: 1.6rem;
            font-size: .6rem;
        }
    }
    main{
        margin: 1rem 0 0;;
        height:calc(~'100% - 1rem');
        display: flex;
        aside{
            background: url(../image/panel_left.png)no-repeat top center/contain;
            width:9.2rem;
            padding:.6rem 0 0;
            ul{
                height:calc(~'100% - 2.5rem');
                margin: .4rem 0;
                padding:0 .15rem 0 .3rem;
                overflow: hidden;
                overflow-y:auto ;
                li{
                    height: 20%;
                    padding: .2rem;
                    position: relative;
                    &:not(:last-of-type):after{
                        content:'';
                        display: block;
                        height: 2px;
                        width: 3rem;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        background: linear-gradient(to right, rgba(6, 175, 253, .7),transparent);
                    }
                    img{
                        float: left;
                        height:100%;
                        width: .95rem;
                        border: .02rem solid #06affd;
                        object-fit: cover;
                        border-radius: 50%;
                        margin:  0 .2rem 0 0;
                        padding: .05rem;
                        background:rgba(255,255,255,.4);
                    }
                    div{
                        h2{
                            font-size: .32rem;
                            padding: .11rem 0 .17rem;
                        }
                        small{
                            font-size: .24rem;
                            color: rgba(255, 255, 255, .6);
                            time{
                                float: right;
                            }
                        }
                    }
                }
            }
            .total{
                overflow: hidden;
                height:1.7rem;
                img{
                    padding: .4rem;
                    height: 100%;
                    float: left;
                }
                div{
                    float: left;
                    width: calc(~'100% - 1.7rem');
                    height: 100%;
                    padding: .2rem 0 0;
                    font-size: .25rem;
                    strong{
                        font-size: .55rem;
                    }
                    p{
                        display: block;
                        overflow: hidden;
                        margin: .2rem 0 0;
                        color:@yellow ;
                        line-height: .45rem;
                        span{
                            float: left;
                            border:.02rem solid @yellow;
                            width: 1.5rem;
                            display: block;
                            text-align: center;
                        }
                        b{
                            border:.02rem solid @yellow;
                            float: left;
                            display: block;
                            background:@yellow;
                            color: #002492;
                            width: calc(~'100% - 1.5rem');
                            font-size: .33rem;
                            padding: 0 .1rem;
                        }
                    }
                }
            }

            &.left {
                position: relative;
                &:after{
                    content:'';
                    display: block;
                    width: .02rem;
                    height: calc(~'100% - 2.5rem');
                    margin: .4rem 0 0 .04rem;
                    position: absolute;
                    top: 0;
                    left: 50%;
                    background: linear-gradient(to bottom,transparent,rgba(6, 175, 253, .7),transparent);
                }
                .large{
                    li{
                        float: left;
                        width: 50%;
                        height: auto;
                        display: flex;
                        align-items: center;
                        padding: .1rem .15rem;
                        &:after{
                            display:none!important;
                        }
                        img{
                            width: .5rem;
                            height: .5rem;
                            margin: 0 .08rem 0 0;
                            padding: .03rem;
                        }
                        div{
                            h2,small{
                                display: inline;
                                font-weight: normal;
                                font-size: .18rem;
                            }
                        }
                    }
                }
            }
            &.right{
                background-image: url(../image/panel_right.png);
                ul{
                    padding:0 .3rem 0 .15rem;
                    li{
                        img{
                            border-color: @blue;
                        }
                        &:not(:last-of-type):after{
                            background: linear-gradient(to right, rgba(0, 255, 231, .7),transparent);
                        }
                    }
                    &.large{
                        padding-top: .1rem;
                        li{
                            width: 20%;
                            float: left;
                            text-align: center;
                            padding: 0;
                            margin: 0 0 .15rem;
                            &:after{
                                content:'';
                                display: none;
                            }
                            img{
                                width:.7rem;
                                height:.7rem;
                                display: block;
                                margin: 0 auto;
                                float: unset;
                                padding: .03rem;
                            }
                            h2{
                                font-size: .18rem;
                                font-weight: normal;
                                padding: .1rem 0;
                            }
                            small{
                                display: block;
                                font-size: .18rem;
                                transform: scale(.8);
                                span{
                                    display: none;
                                }
                                time{
                                    float: unset;
                                }
                            }
                        }
                    }
                }
                .total div{
                    text-align: right;
                    p{
                        border-color: @blue;
                        color: @blue;
                        span{
                            border-color: @blue;
                        }
                        b{
                            border-color: @blue;
                            background: @blue;
                        }
                    }
                }
            }
        }
        section{
            width: 100%;
            height: 100%;
            padding:.75rem 0 0;
            #scan{
                background: url(../image/board.png)no-repeat center/calc(~'100% - .5rem') 100%;
                height: 6.4rem;
                padding: .26rem 0 1.05rem;
                #img{
                    width:calc(~'100% - 1.15rem');
                    height: 100%;
                    margin:0 auto;
                    display: block;
                    background:rgba(255,255,255,.4);
                    box-shadow: 0 0 0.2rem .05rem rgba(0, 0, 0, 0.3) inset;
                }
            }
            footer{
                overflow: hidden;
                margin: -.4rem 0 0;
                padding: 0 .3rem;

                div{
                    float: left;
                    width: 3rem;
                    padding:.18rem .3rem 0;
                    background: url(../image/topic.png)no-repeat top left/auto .9rem;
                    h1{
                        font-size:.32rem;
                        letter-spacing: .03rem;
                        p{
                            font-size: .18rem;
                            font-weight: normal;
                            padding: .1rem 0 0;
                            letter-spacing: 0;
                        }
                    }
                    h3{
                        padding: .42rem 0 0;
                        font-size: .25rem;
                        letter-spacing: .03rem;
                        p{
                            letter-spacing: 0;
                            font-weight: normal;
                            font-size: .2rem;
                            color: #05f8e2;
                            padding: 0 0 .1rem;
                        }
                    }
                }
                ul{
                    float: left;
                    width: calc(~'100% - 3rem');
                    li{
                        padding: .2rem 0 0;
                        font-size: .25rem;
                        display: block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
    .alert{
        position: absolute;
        top: 50%;
        left: 50%;
        width:7rem;
        height:8rem;
        margin:-4rem 0 0 -3.5rem;
        background: url(../image/popup.png)no-repeat center/contain;
        text-align: center;
        img{
            width: 2rem;
            height: 2rem;
            margin: 1.4rem auto 0;
            object-fit: cover;
            display: block;
            border: .05rem solid #06AFFD;
            border-radius: 50%;
            padding: .1rem;
        }
        h1{
            font-size: .35rem;
            margin: .2rem 0 .15rem;
            letter-spacing: .05rem;
        }
        p{
            font-size: .27rem;
            color: rgba(255,255,255,.85);
            letter-spacing: .05rem;
        }
        time{
            display: block;
            margin: 1.68rem 0 0;
            font-size: .22rem;
            color:#06AFFD;
        }
    }
}
